<route lang="yaml">
meta:
  enabled: false
          </route>

<script lang="ts" setup>
import type { VxeColumnPropTypes, VxeFormEvents, VxePagerEvents, VxeTableInstance } from 'vxe-table'
import { ElMessage } from 'element-plus'
import apiReport from '@/api/modules/report'
import apiRoute from '@/api/modules/route'

const g = useGlobalProperties()
const pageData = reactive({
  loading: false,
  tableData: [] as any[],
  // 弹窗相关
  modalShow: false,
  modalName: '',
  priorityLevelList: [] as any[],
  storageTypeList: [] as any[],
  routeList: [] as any[],
  orderDeliveryStateList: [] as any[],
  tablePrint: {
    // 自定义打印的样式示例
    style: `
                .vxe-table {
                  color: #000000; // 修改表格默认颜色
                  font-size: 12px; // 修改表格默认字体大小
                  font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu; // 修改表格默认字体
                }
                .vxe-table,
                .vxe-table thead th,
                .vxe-table tbody td,
                .vxe-table tfoot td  {
                  border-color: #000000; // 修改表格边框颜色
                }
                .vxe-table thead th {
                  color: green; // 修改表头字体颜色
                  font-size: 14px; // 修改表头默认字体大小
                }
                .vxe-table tfoot td {
                  color: red; // 修改表尾字体颜色
                }
                `,
  },
})
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})

interface FormDataVO {
  orderCode: string
  billSn: string
  customerName: string
  routeName: string
  priorityLevel: string
  status: string
  trusteeName: string
}
const formTop = reactive<FormDataVO>({
  orderCode: '',
  billSn: '',
  customerName: '',
  routeName: '',
  priorityLevel: '',
  status: '',
  trusteeName: '',
})
const tableRef = ref<VxeTableInstance>()
/// /////////////////////////////////////时间格式化
const formatterPriorityLevel: VxeColumnPropTypes.Formatter<any> = ({ cellValue }) => {
  const res = g.selectDictLabel(pageData.priorityLevelList, cellValue)
  return res
}
const formatterDeliveryStatus: VxeColumnPropTypes.Formatter<any> = ({ cellValue }) => {
  const res = g.selectDictLabel(pageData.orderDeliveryStateList, cellValue)
  return res
}
/// ///////////////////////////////////top按钮相关
/// ///////////////////////////////////打印

/// ///////////////////////////////////api
function apiPage(req: any) {
  pageData.loading = true
  apiReport.pageOrderHeaderReport(req).then((res) => {
    pageData.tableData = res.data.list
    tablePage.total = res.data.total
    pageData.loading = false
  }).catch((err) => {
    ElMessage.error({
      message: JSON.stringify(err),
      center: true,
    })
    pageData.loading = false
  })
}
function apiListRoute() {
  apiRoute.list({}).then((res: any) => {
    pageData.routeList = res.data.list
  })
}
/// ///////////////////////////////////翻页
const submitTopEvent: VxeFormEvents.Submit = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    billSn: formTop.billSn,
    priorityLevel: formTop.priorityLevel,
    orderCode: formTop.orderCode,
    customerName: formTop.customerName,
    trusteeName: formTop.trusteeName,
    routeName: formTop.routeName,
    status: formTop.status,
  }
  apiPage(req)
}

const resetTopEvent: VxeFormEvents.Reset = () => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    billSn: formTop.billSn,
    priorityLevel: formTop.priorityLevel,
    orderCode: formTop.orderCode,
    customerName: formTop.customerName,
    trusteeName: formTop.trusteeName,
    routeName: formTop.routeName,
    status: formTop.status,
  }
  // console.log(req)
  apiPage(req)
}
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    billSn: formTop.billSn,
    priorityLevel: formTop.priorityLevel,
    orderCode: formTop.orderCode,
    customerName: formTop.customerName,
    trusteeName: formTop.trusteeName,
    routeName: formTop.routeName,
    status: formTop.status,
  }
  apiPage(req)
}
/// /////////////////////////////////报表导出
function exportExcel() {
  apiReport.pageOrderHeaderExcel(formTop).then((res: any) => {

  }).catch((e) => {
    if (e && !e.msg) {
      const blob = new Blob([e])// 处理文档流
      const down = document.createElement('a')
      down.download = '订单汇总.xlsx'
      down.style.display = 'none'// 隐藏,没必要展示出来
      down.href = URL.createObjectURL(blob)
      document.body.appendChild(down)
      down.click()
      URL.revokeObjectURL(down.href) // 释放URL 对象
      document.body.removeChild(down)// 下载完成移除
    }
  })
}
function printSelectEvent() {
  const $table = tableRef.value
  $table?.print({
    data: $table.getCheckboxRecords(),
  })
}
function printDataEvent() {
  const $table = tableRef.value
  $table?.openPrint()
}
function exportDataEvent() {
  const $table = tableRef.value
  $table?.openExport()
}
/// ///////////////////////////////////生命周期
onBeforeMount(() => {
  g.getDicts('delivery_priority').then((res: any) => {
    pageData.priorityLevelList = res.data.list
  })
  g.getDicts('storage_type').then((res: any) => {
    pageData.storageTypeList = res.data.list
  })
  g.getDicts('order_delivery_state').then((res: any) => {
    pageData.orderDeliveryStateList = res.data.list
  })
})
onMounted(() => {
  tablePage.currentPage = 1
  tablePage.pageSize = 10
  const req = {
    pageIndex: tablePage.currentPage,
    pageSize: tablePage.pageSize,
    billSn: formTop.billSn,
    priorityLevel: formTop.priorityLevel,
    orderCode: formTop.orderCode,
    customerName: formTop.customerName,
    trusteeName: formTop.trusteeName,
    routeName: formTop.routeName,
    status: formTop.status,
  }
  apiPage(req)
  apiListRoute()
})
</script>

<template>
  <div class="page-wrap">
    <div class="page-top">
      <vxe-form :data="formTop" style="padding-left: 5px;" @submit="submitTopEvent" @reset="resetTopEvent">
        <vxe-form-item title="订单编号" field="orderCode" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.orderCode" placeholder="请输入订单编号" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="运单号" field="billSn" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.billSn" placeholder="请输入运单号" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="客户名称" field="customerName" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.customerName" placeholder="请输入客户名称" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="委托商" field="trusteeName" :item-render="{}">
          <template #default="{ data }">
            <vxe-input v-model="data.trusteeName" placeholder="请输入委托商" clearable />
          </template>
        </vxe-form-item>
        <vxe-form-item title="线路" field="routeName" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.routeName" placeholder="请选择线路" clearable>
              <vxe-option
                v-for="(item, index) in pageData.routeList" :key="index" :value="item.name"
                :label="item.name"
              />
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="优先级" field="priorityLevel" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.priorityLevel" placeholder="请选择优先级" clearable>
              <vxe-option
                v-for="(item, index) in pageData.priorityLevelList" :key="index" :value="item.value"
                :label="item.label"
              />
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item title="派送状态" field="status" :item-render="{}">
          <template #default="{ data }">
            <vxe-select v-model="data.status" placeholder="请选择派送状态" clearable>
              <vxe-option
                v-for="(item, index) in pageData.orderDeliveryStateList" :key="index" :value="item.value"
                :label="item.label"
              />
            </vxe-select>
          </template>
        </vxe-form-item>
        <vxe-form-item>
          <template #default>
            <vxe-button type="submit" status="primary" content="搜索" />
            <vxe-button type="reset" content="重置" />
          </template>
        </vxe-form-item>
      </vxe-form>
      <vxe-toolbar>
        <template #buttons>
          <vxe-button status="primary" style="margin-left: 5px;" icon="vxe-icon-file-excel" @click="exportDataEvent">
            导出
          </vxe-button>
          <!-- <vxe-button style="margin-left: 5px;" icon="vxe-icon-print" @click="printSelectEvent">
            打印选中
          </vxe-button> -->
          <vxe-button status="primary" style="margin-left: 5px;" icon="vxe-icon-print" @click="printDataEvent">
            打印
          </vxe-button>
        </template>
      </vxe-toolbar>
    </div>
    <page-main>
      <vxe-table
        ref="tableRef" auto-resize border stripe :loading="pageData.loading" :column-config="{ resizable: true }"
        :row-config="{ isHover: true }" :checkbox-config="{ highlight: true, range: true }" :data="pageData.tableData"
        align="center" header-align="center"
        :export-config="{}"
        :print-config="pageData.tablePrint"
      >
        <vxe-column type="checkbox" width="50" />
        <vxe-column field="order_code" align="center" title="订单编号" />
        <vxe-column field="trans_bill_sn" align="center" title="运单号">
          <template #default="{ row }">
            {{ row.trans_bill_sn || '待分配' }}
          </template>
        </vxe-column>
        <vxe-column field="customer_name" align="center" title="客户名称" />
        <vxe-column field="trustee_name" align="center" title="委托商" />
        <vxe-column field="route" align="center" title="线路" />
        <vxe-column field="pack_count" align="center" title="箱/包数" />
        <vxe-column field="priority_level" align="center" title="优先级" :formatter="formatterPriorityLevel" />
        <vxe-column field="status" align="center" title="派送状态" :formatter="formatterDeliveryStatus" />
        <vxe-column field="carrier_name" align="center" title="承运商" />
        <vxe-column field="car_sn" align="center" title="车牌号" />
        <vxe-column field="driver_name" align="center" title="司机" />
      </vxe-table>
    </page-main>
    <div class="page-opration-container">
      <vxe-pager
        v-model:current-page="tablePage.currentPage" v-model:page-size="tablePage.pageSize"
        :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
        :total="tablePage.total" @page-change="handlePageChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-top {
    margin-top: 5px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .page-main {
    flex: 1;
    overflow: auto;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-top: 5px;
  }

  .page-opration-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
  }
}
</style>
